<!--
 * @Descripttion: 
 * @version: 
 * @Author: luhe
 * @Date: 2022-07-06 16:04:07
 * @LastEditors: luhe
 * @LastEditTime: 2023-02-16 18:00:58
-->
<template>
  <a-table :dataSource="dataSource" :columns="columns" />

  <hr>
  <div>使用store的数据：{{$store.state.commonData.count}}</div>
  <div>使用store2的数据：{{$store.state.commonData.num}}</div>
  <a-button @click="add(1)">点击++</a-button>

  <hr>
  <h1>基本信息</h1>
  姓：<input type="text" v-model="personInfo.firstName">
  <br>
  名：<input type="text" v-model="personInfo.lastName">
  <br>
  <span> 全名：{{ personInfo.fullName }} </span>

  <hr>
  <h1>一个响应式</h1>
  <a-input-number v-model:value="numInfo.firstNum" style="width: 200px" @change='onChange'></a-input-number><br>
  <a-input-number v-model:value="numInfo.lastNum" style="width: 200px"></a-input-number><br>
  <span>计算结果： {{ numInfo.finaNum }}</span>
  <hr>

  <a-button type="primary" @click="btnClick">点我+1</a-button>
  <span>结果：{{ watchNum }}</span>
  <hr>
</template>
<script>
import { useStore } from 'vuex'
import { ref, reactive, computed, watch, defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const store = useStore()  // 该方法用于返回store 实例
        /**点击事件 */
    const clickMethods = {
      add(num) {
        store.commit('sum', num)
      },
      onChange(value) {
        console.log(value, 40);
      },
      // btnClick() {
      //   watchNum.value ++ 
      // }
    }
    const btnClick = () => {
      watchNum.value ++ 
    }
    // 计算属性
    /**使用ref将数据变成响应式 */
    let personInfo = ref({
      firstName: '张',
      lastName: '三',
      fullName: ''
    })
    personInfo.value.fullName = computed(() => {
      return personInfo.value.firstName + personInfo.value.lastName
    })
    /**使用reactive将数据变成响应式 */
    let numInfo = reactive({
      firstNum: 0,
      lastNum: 0,
      finaNum: 0
    })
    numInfo.finaNum = computed(() => {
      return numInfo.firstNum + numInfo.lastNum
    })

    /**watch属性 */
    let watchNum = ref(0)
    watch(watchNum, (newVal, oldVal) => {
      // console.log(newVal, oldVal);
    })


    return {
      dataSource: [
        {
          key: '1',
          name: '胡彦斌',
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          address: '西湖区湖底公园1号',
        },
      ],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '住址',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      ...clickMethods,
      btnClick,
      personInfo,
      // fullName,
      numInfo,
      // finaNum
      watchNum
      
    }
  }
})
</script>